<template lang="pug">
.view.cp-train-lib-lessons.fix-flex-pos
  .left-wrap(v-loading="treeLoading")
    .tree-title
      span.text {{ currentNode ? currentNode.name : null }}
      span.right-btn
        el-radio-group(v-model="treeType" size="small")
          el-radio-button(label="1") 自建
          el-radio-button(label="2", disabled) 平台
    el-tree.tree-warp(
      :data="treeData"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      @node-click="nodeClick")
      .custom-tree(slot-scope="{ node, data }")
        p(:class="{active: currentNode && currentNode.id === data.id}") {{ data.name }}
  //- 查询
  .right-wrap
    el-form.tracou-search(:inline="true")
      el-form-item
        el-input(v-model="crsName", placeholder="编码/名称/描述", style="width: 200px")
      el-form-item(label="授课方式 :")
        el-select.select-width(v-model="crsForm", placeholder="请选择")
          el-option(label="全部", :value="null")
          el-option(v-for="(item, index) in crsFormSelect", :key="index", :label="item.name", :value="item.value")
      el-form-item(label="培训机构 :")
        el-select.select-width(v-model="crsAgency", placeholder="请选择")
          el-option(label="全部", :value="null")
          el-option(v-for="(item, index) in agencySelect", :key="index", :label="item.name", :value="item.value")
      el-form-item(label="创建人 :")
        el-select.select-width(v-model="crsCreator", placeholder="请选择")
          el-option(label="全部", :value="null")
          el-option(v-for="(item, index) in empSelect", :key="index", :label="item.name", :value="item.value")
      el-form-item
        el-button(type="primary", @click="search") 搜索
    //- 表格
    .tracou-table
      el-table(
        :data="dataList",
        highlight-current-row,
        v-loading="loadingData",
        size="mini",
        height="100%")
        el-table-column(show-overflow-tooltip, type="index", label="序号")
        el-table-column(show-overflow-tooltip, prop="code", label="编号")
        el-table-column(show-overflow-tooltip, prop="name", label="名称")
        el-table-column(show-overflow-tooltip, prop="version", label="版本")
        el-table-column(show-overflow-tooltip, prop="type", label="课程分类")
          template(slot-scope="scope")
            span {{ scope.row.type | compare-list(crsTypeSelect) }}
        el-table-column(show-overflow-tooltip, prop="form", label="授课方式")
          template(slot-scope="scope")
            span {{ scope.row.form | compare-list(crsFormSelect) }}
        el-table-column(show-overflow-tooltip, prop="trainAgency", label="培训机构")
          template(slot-scope="scope")
            span {{ scope.row.trainAgency | compare-list(agencySelect) }}
        el-table-column(show-overflow-tooltip, prop="trainTeacher", label="培训老师")
          template(slot-scope="scope")
            span {{ scope.row.trainTeacher | compare-list(teacherSelect) }}
        el-table-column(show-overflow-tooltip, prop="creator", label="创建人")
          template(slot-scope="scope")
            span {{ scope.row.creator | compare-list(empSelect) }}
        el-table-column(show-overflow-tooltip, prop="trainTime", label="创建时间")
          template(slot-scope="scope")
            span {{ scope.row.trainTime | date-format }}
        el-table-column(label="操作", min-width="80px")
          template(slot-scope="scope")
            el-tooltip(content="详情")
              i.icon-act.el-icon-view(@click="viewDetail(scope.row, scope.$index)")
            el-tooltip(content="加入待学")
              i.icon-act.el-icon-circle-plus(@click="addToLearn(scope.row, scope.$index)")
    //- 分页
    el-pagination.tracou-pagination(
      background,
      layout="total, prev, pager, next, jumper",
      prev-text="上一页",
      next-text="下一页",
      @current-change="handleCurrentChange",
      :current-page="pageNum",
      :page-size="pageSize",
      :total="totalNum")
  //- 课程popup
  course-popup(
    :title="cfdiaTitle",
    :visible.sync="cfdiaVisible",
    :is-edit="cfdiaEdit",
    :parent-data="formData",
    @close="cfdiaVisible = false")
</template>

<script>
import { mapGetters } from 'vuex';
import TrainData from '@/data/train';
import CoursePopup from '../../manage/train/courseman/coursePopup';

export default {
  name: 'tralessons',
  components: {
    CoursePopup
  },
  data() {
    return {
      // 左边部分
      treeType: '1',
      treeLoading: false,
      leftEditing: false,
      currentNode: null,
      treeData: [{
        id: '1',
        name: '',
        children: []
      }],
      // 右边部分
      loadingData: true,
      dataList: [],
      pageNum: 1,
      pageSize: 16,
      totalNum: 0,
      // 搜索条件
      crsName: null,
      crsForm: null,
      crsAgency: null,
      crsCreator: null,
      // 弹出框
      cfdiaTitle: '查看课程',
      cfdiaVisible: false,
      cfdiaEdit: false,
      formData: {},
      // 搜索下拉框
      statusSelect: [
        { name: '启用', value: 0 },
        { name: '禁用', value: 1 }
      ]
    };
  },
  computed: {
    ...mapGetters([
      'empSelect',
      'crsTypeSelect',
      'crsFormSelect',
      'agencySelect',
      'teacherSelect',
      'assignerSelect'
    ])
  },
  created() {
    // 缓存编辑数据
    this.treeCache = [];
  },
  mounted() {
    this.loadTreeDetail();
    this.loadDataList();
  },
  methods: {
    // 处理tree详情
    dealTreeDetail(data) {
      // 根节点
      data[0].id = '1';
      this.dealChildren(data[0].children, data[0].id);
    },
    // 处理children的id
    dealChildren(array, prevPosi) {
      if (array && array.length) {
        array.forEach((item, index) => {
          const posi = `${prevPosi}-${index + 1}`;
          item.id = posi;
          this.dealChildren(item.children, posi);
        });
      }
    },
    // 获取tree detail
    loadTreeDetail() {
      this.treeLoading = true;
      setTimeout(() => {
        const data = TrainData.treeData;
        this.dealTreeDetail(data);
        this.treeData = data;
        this.treeLoading = false;
      }, 500);
    },
    // 节点点击
    nodeClick(data) {
      this.currentNode = data;
      if (data.id.split('-').length > 2) {
        this.loadDataList();
      }
    },
    // 整理参数
    filterParams() {
      const params = {
        crsName: this.crsName,
        crsForm: this.crsForm,
        crsAgency: this.crsAgency,
        crsCreator: this.crsCreator
      };
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key];
        }
      }
      return params;
    },
    // 取得表格数据
    loadDataList() {
      this.loadingData = true;
      // const params = this.filterParams();
      setTimeout(() => {
        this.dataList = TrainData.courseLibList;
        this.totalNum = 64;
        this.loadingData = false;
      }, 500);
    },
    // 搜索
    search() {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadDataList();
    },
    // 页码改变
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadDataList();
    },
    // 查看课程
    viewDetail() {
      this.cfdiaTitle = '查看课程';
      this.cfdiaEdit = false;
      this.formData = {
        // 组织架构选择
        accordOrgArr: [],
        // 角色选择
        accordRoleArr: [],
        // 黑名单
        accordBlackArr: [],
        // 课堂列表
        classList: [],
        studentList: [],
        // 培训材料
        materialList: [],
        // 题库
        topicArray: [
          {
            questionOptions: [],
            answer: []
          }
        ]
      };
      this.cfdiaVisible = true;
    },
    // 加入待学
    addToLearn(row) {
      const h = this.$createElement;
      this.$msgbox({
        title: '确定加入以下课程至待学吗？',
        message: h('div', null, [
          h('p', null, `课程编号：${row.code}`),
          h('p', null, `课程名称：${row.name}`),
          h('p', null, `课程版本：${row.version}`),
          h('p', null, `授课方式：${row.form}`)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        setTimeout(() => {
          if (Math.random() > 0.5) {
            this.$message({ message: '添加成功', type: 'success' });
          } else {
            this.$message.error('添加失败');
          }
        }, 500);
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消' });
      });
    }
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$SEARCHHEIGHT: 56px
$PAGEHEIGHT: 56px
$SELECTWIDTH: 100px
$TREEWIDTH: 360px
$PADDINGWIDTH: 12px
.cp-train-lib-lessons
  .left-wrap
    position: absolute
    top: $PADDINGWIDTH
    left: 16px
    bottom: $PADDINGWIDTH
    width: $TREEWIDTH
    background-color: #fff
    .tree-title
      position: relative
      height: 44px;
      line-height: 40px;
      background: #f5f7fa;
      margin: 0;
      padding-left: 15px;
      border: 1px solid #ebeef5;
      box-sizing: border-box;
      color: #000;
      .right-btn
        position: absolute
        right: 16px
        .el-radio-button
          box-shadow: none
    .el-tree
      height: calc(100% - 44px)
      overflow-x: hidden
      overflow-y: auto
    .el-tree-node__content
      height: 34px
    .el-tree-node:focus>.el-tree-node__content, .el-tree-node__content:hover
      background-color: transparent
    .custom-tree
      flex: 1
      display: flex
      align-items: center
      justify-content: space-between
      font-size: 14px
      padding-right: 8px
      height: 32px
      line-height: 32px
      .active
        color: #5D9BFB
  .right-wrap
    position: absolute
    top: 0
    right: 16px
    bottom: 0
    left:  $TREEWIDTH + 32px
    .tracou-search
      height: $SEARCHHEIGHT
      padding: 12px 0 12px 0
      overflow-x: auto
      overflow-y: hidden
      .select-width
        width: $SELECTWIDTH
      .date-width
        width: 260px
      .el-form-item
        margin-right: 14px
      .el-form-item__label
        margin-left: 6px
        padding-right: 6px
      .el-date-editor .el-range__close-icon
        width: 20px
      .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label
        height: 32px
    .tracou-table
      position: absolute
      top: $SEARCHHEIGHT
      bottom: $PAGEHEIGHT
      left: 0
      right: 0
      overflow-x: hidden
      overflow-y: auto
      &::before
        display: none
      .icon-act
        font-size: 16px
        font-weight: 500
        cursor: pointer
        margin-left: 3px
        margin-right: 3px
        &:hover
          color: #5D9BFB
    .el-table
      th, td
        text-align: center
    .tracou-pagination
      position: absolute
      bottom: 12px
      left: 0
      right: 0
      text-align: center
</style>
